<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>游戏应用</title>
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#000000">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="游戏应用">
    <link rel="apple-touch-icon" href="assets/icon.png">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background: #000;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }

        .container {
            position: relative;
            width: 100vw;
            height: 100vh;
            background: #000;
        }

        /* 背景视频 */
        #background-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        /* UI元素容器 */
        .ui-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        .ui-element {
            position: absolute;
            pointer-events: auto;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .ui-element:hover {
            transform: scale(1.05);
        }

        /* 主Logo - 居中上方 */
        .main-logo {
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 100px;
        }

        /* 游戏图标 - 左上角 */
        .icon {
            top: 20px;
            left: 20px;
            width: 80px;
            height: 80px;
        }

        /* 服务器图标 - 右上角 */
        .server-icon {
            top: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
        }

        /* 服务器状态 */
        .server-status {
            top: 90px;
            right: 20px;
            width: 120px;
            height: 40px;
        }

        /* 文字提示 - 中央 */
        .text-prompt {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 60px;
            margin-top: 50px;
        }

        /* 适龄提示 - 左下角 */
        .age-rating {
            bottom: 20px;
            left: 20px;
            width: 100px;
            height: 50px;
        }

        /* 扫码修复 - 右下角 */
        .qr-code {
            bottom: 20px;
            right: 20px;
            width: 120px;
            height: 120px;
        }

        /* 响应式设计 */
        @media screen and (orientation: portrait) {
            body::before {
                content: "请将设备横屏使用";
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 24px;
                z-index: 1000;
                background: rgba(0, 0, 0, 0.8);
                padding: 20px;
                border-radius: 10px;
            }
        }

        /* 加载动画 */
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            color: white;
            font-size: 24px;
        }

        .loading.hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div class="loading" id="loading">
        <div>加载中...</div>
    </div>

    <div class="container">
        <!-- 背景视频 -->
        <video id="background-video" autoplay muted loop playsinline>
            <source src="assets/背景动画.mp4" type="video/mp4">
            您的浏览器不支持视频播放
        </video>

        <!-- UI覆盖层 -->
        <div class="ui-overlay" id="ui-overlay">
            <!-- UI elements will be loaded here dynamically -->
        </div>
    </div>

    <script>
        // 注册Service Worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('/sw.js')
                    .then(function (registration) {
                        console.log('ServiceWorker registration successful');
                    }, function (err) {
                        console.log('ServiceWorker registration failed: ', err);
                    });
            });
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function () {
            const loading = document.getElementById('loading');
            const video = document.getElementById('background-video');

            // 强制横屏
            if (screen.orientation && screen.orientation.lock) {
                screen.orientation.lock('landscape').catch(function (error) {
                    console.log('无法锁定屏幕方向:', error);
                });
            }

            // 视频加载完成后隐藏加载界面
            video.addEventListener('loadeddata', function () {
                setTimeout(function () {
                    loading.classList.add('hidden');
                }, 1000);
            });

            // 确保视频循环播放
            video.addEventListener('ended', function () {
                video.currentTime = 0;
                video.play();
            });

            // 页面可见性变化时处理视频播放
            document.addEventListener('visibilitychange', function () {
                if (document.hidden) {
                    video.pause();
                } else {
                    video.play();
                }
            });
        });

        // 动态加载布局
        async function loadLayout() {
            try {
                const response = await fetch('layout.json');
                if (!response.ok) {
                    console.log('No layout.json found, using default layout');
                    return;
                }

                const layout = await response.json();
                const uiOverlay = document.getElementById('ui-overlay');

                layout.forEach(item => {
                    if (item.type === 'text') {
                        // 创建文本元素
                        const textElement = document.createElement('div');
                        textElement.textContent = item.content || '首服一区';
                        textElement.className = 'ui-element text-element';
                        textElement.id = item.id;
                        textElement.style.position = 'absolute';
                        textElement.style.color = item.color || 'white';
                        textElement.style.fontSize = (item.fontSize || 24) + 'px';
                        textElement.style.fontWeight = 'bold';
                        textElement.style.textShadow = '2px 2px 4px rgba(0,0,0,0.8)';
                        textElement.style.fontFamily = 'Arial, sans-serif';
                        textElement.style.transform = item.transform || `translate(${item.x}px, ${item.y}px)`;
                        textElement.style.cursor = 'pointer';
                        textElement.style.zIndex = '10';

                        // 添加点击事件
                        textElement.onclick = () => handleElementClick(item.id);

                        uiOverlay.appendChild(textElement);
                    } else {
                        // 创建图片元素
                        const element = document.createElement('img');
                        element.src = item.src;
                        element.alt = item.id;
                        element.className = 'ui-element';
                        element.id = item.id;
                        element.style.position = 'absolute';
                        element.style.width = item.width || '150px';
                        element.style.transform = item.transform || `translate(${item.x}px, ${item.y}px)`;
                        element.style.cursor = 'pointer';

                        // 添加点击事件
                        element.onclick = () => handleElementClick(item.id);

                        uiOverlay.appendChild(element);
                    }
                });
            } catch (error) {
                console.error('Error loading layout:', error);
            }
        }

        // 游戏逻辑
        function handleElementClick(elementId) {
            console.log(`Element clicked: ${elementId}`);
            // 根据元素ID执行不同的逻辑
            switch (elementId) {
                case 'element-0':
                    console.log('Main logo clicked');
                    break;
                case 'element-1':
                    console.log('Icon clicked');
                    break;
                case 'element-2':
                    console.log('Server clicked');
                    break;
                case 'element-3':
                    console.log('QR Code clicked');
                    break;
                default:
                    console.log(`Custom element ${elementId} clicked`);
            }
        }

        // 页面加载时加载布局
        loadLayout();

        // 防止页面缩放
        document.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        });

        let lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
            const now = (new Date()).getTime();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    </script>
</body>

</html>